<template>
  <div id="videos">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <p class="num">共{{table_data01.length}}条结果</p>
        <div class="box" v-for="(item, i) in table_data01" :key="i + 't'">
          <!-- <van-image round :src="" /> -->
          <!-- 视频ban -->
          <div class="boxleft">
            <a href class="aa">
              <img :src="item.thumPic" />
            </a>
          </div>
          <!-- 文字介绍 -->
          <div class="boxright">
            <p class="tit">{{ item.title }}</p>
            <!-- 数字 -->
            <div class="numm">
              <div class="one">
                <p>{{ format_num(item.favoriteCount) }}</p>
                <span>观看人数峰值</span>
              </div>
              <div class="two">
                <p>{{ format_num(item.commentCount) }}</p>
                <span>直播销量</span>
              </div>
              <div class="three">
                <p>{{ format_num(item.shareCount) }}</p>
                <span>直播销量额</span>
              </div>
            </div>
            <!-- 时间 -->
            <div class="time">
              <div class="day">
                <img src="@/assets/two/time_03.jpg" alt />
                发布时间：{{item.releaseTime}}
              </div>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </van-list>
  </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
export default {
  name: '',
  components: {},
  data() {
    return {
      page: 1,
      pageSize: 20,
      table_data01: [],
      //触底
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.get_data();
  },

  methods: {
    //接口数据
    get_data() {
      if (this.table_data01.length == 0) {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0
        });
      }
      this.loading = true;
      this.$axios
        .get('/api/collection/GetAwemeCollection', {
          params: {
            pageIndex: this.page,
            pageSize: this.pageSize
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            Toast.clear();
            this.table_data01 = this.table_data01.concat(res.data.data);
            this.loading = false;
            this.refreshing = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //触底
    onLoad() {
      this.loading = true;
      if (this.page * this.pageSize > this.table_data01.length) {
        this.loading = false;
        //this.finished = true;
      } else if (this.table_data01.length > 0) {
        this.page = this.page + 1;
        this.get_data();
      }
    },
    //上拉刷新
    onRefresh() {
      // 清空列表数据
      // this.finished = true;
      this.pageIndex = 1;
      // this.table_data01 = [];
      this.get_data();
    }
  }
};
</script>

<style lang='less' scoped>
#videos {
  width: 92%;
  margin: 0 auto;
  background: #f1f1f1;
  min-height: 100vh;
  a {
    text-decoration: none;
  }
  .num {
    width: 100%;
    font-size: 0.373333rem;
    line-height: 0.373333rem;
    padding: 0.37333rem 0 0.266rem 0.1rem;
    margin-top: 0.22rem;
  }
  .numm {
    width: 100%;
    font-size: 0.373333rem;
    line-height: 0.373333rem;
    // padding: .37333rem 0 .266rem .1rem;
  }
  .box {
    display: flex;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 0.2rem;
    // 视频ban
    .boxleft {
      width: 28.98%;
      > .aa {
        width: 80%;
        // line-height: 2.666667rem;
        display: block;
        margin: 0.266rem auto;
        > img {
          width: 100%;
          display: inline-block;
          border: 1px solid transparent;
          border-radius: 15px;
        }
      }
    }
    // 文字介绍
    .boxright {
      width: 64%;
      padding-left: 0.133rem;
      .tit {
        width: 84.48%;
        line-height: 1.173rem;
        font-size: 0.373rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-top: 0.08rem;
        color: #222;
      }
      .numm {
        display: flex;
        .one > p,
        .two > p,
        .three > p {
          font-family: Dinpro-medium;
        }
        .one,
        .two {
          width: 34.28%;
        }
        .three {
          width: 30.6%;
        }
        p {
          font-size: 0.266rem;
          text-align: left;
          padding-bottom: 0.213rem;
          color: #222;
        }
        span {
          display: block;
          font-size: 0.28rem;
          text-align: left;
          padding-bottom: 0.373rem;
          color: #888;
        }
      }
      .time {
        width: 100%;
        height: 0.32rem;
        padding-bottom: 0.453rem;
        .day {
          line-height: 0.32rem;
          height: 0.32rem;
          font-size: 0.32rem;
          color: #888;
          img {
            width: 0.33rem;
            display: inline-block;
          }
        }
      }
    }
  }
  .bot {
    padding-bottom: 0.3733rem;
  }
}

//解决下拉刷新与标题切换问题
.van-pull-refresh {
  overflow: auto !important;
}
/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>